import { animate } from '@angular/animations';
import { LoadingService } from './../service/loading.service';
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'cmb-loading',
    templateUrl: './loading.component.html',
    styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {

    isShow = false;

    @ViewChild('loading') loading: ElementRef;

    constructor(private loadingService: LoadingService) { }

    ngOnInit() {
        this.loadingService.loadingEvent.subscribe((isShow: boolean) => {
            if (isShow) {
                this.isShow = isShow;
                $(document.body).css({ 'overflow': 'hidden' });
                setTimeout(() => $(this.loading.nativeElement).css({ 'transform': 'scale(1)' }));
            } else {
                $(document.body).css({ 'overflow': 'auto' });
                setTimeout(() => $(this.loading.nativeElement).css({ 'transform': 'scale(0)' }));
                setTimeout(() => this.isShow = isShow, 500);
            }
        });
    }

    hide() {
        this.loadingService.loading(false);
    }
}
